import { t } from 'i18next'
import React, { FC, useRef } from 'react'
import {
	Modal,
	Input,
	Switch,
	CheckBox,
	RadioGroup,
	Button,
	Space,
	InputNumber,
	InnerInputRef,
} from '@kedacom/react-next'
import shallow from 'zustand/shallow'
import { useSettingMeetingStore } from './store'
import { Wrap, LineWrapper, StyledBtn } from './style'
import Alert from '@/components/Alert'
import { useMccStore } from '../../store'
import { getUTF8ByteCount, regexEnum } from '@/utils'
import { useGlobalStore } from '@/store/global'

const MeetingInfoSet: FC = () => {
	const inputRef = useRef<InnerInputRef>(null)
	const isSmartCascadeMode = useMccStore((state) => state.mccInfo.smartCascadeMode === 1)
	const SWITCH = useGlobalStore((state) => state.SWITCH)

	const {
		showMeetingInfo,
		update,
		password,
		name,
		meetingClosed,
		meetingSafe,
		watermark,
		enableRtc,
		loginFree,
		doubleFlowLimit,
		showDCSChoosen,
		dcsMode,
		updateMeetingInfo,
		checkMeetingName,
	} = useSettingMeetingStore(
		(state) => ({
			showMeetingInfo: state.showMeetingInfo,
			update: state.update,
			password: state.password,
			name: state.name,
			meetingClosed: state.meetingClosed,
			meetingSafe: state.meetingSafe,
			watermark: state.watermark,
			enableRtc: state.enableRtc,
			loginFree: state.loginFree,
			doubleFlowLimit: state.doubleFlowLimit,
			showDCSChoosen: state.showDCSChoosen,
			dcsMode: state.dcsMode,
			updateMeetingInfo: state.updateMeetingInfo,
			checkMeetingName: state.checkMeetingName,
		}),
		shallow
	)
	const height = () => {
		if (showDCSChoosen && enableRtc) {
			return 431
		} else if (showDCSChoosen || enableRtc) {
			return 400
		} else {
			return 369
		}
	}
	return (
		<>
			<Modal
				width={558}
				height={height()}
				open={showMeetingInfo}
				style={{ height: 'auto' }}
				title={t('会议信息设置')}
				footer={
					<StyledBtn>
						<Space>
							<Button
								className="btn"
								onClick={async () => {
									const flag = await inputRef.current?.valid()
									if (!flag) {
										Alert(inputRef.current?.errorMsg)
										return
									}
									updateMeetingInfo()
								}}
							>
								{t('确定')}
							</Button>
							<Button onClick={() => update({ showMeetingInfo: false })}>{t('取消')}</Button>
						</Space>
					</StyledBtn>
				}
				onCancel={() => {
					update({ showMeetingInfo: false })
				}}
			>
				<Wrap>
					<LineWrapper className="name">
						<span className="label">{t('会议名称')}</span>
						<Input
							innerRef={inputRef}
							disabled={isSmartCascadeMode}
							value={name}
							width={200}
							height={18}
							maxLength={SWITCH.characterLimit ? 32 : undefined}
							focusMsg={SWITCH.characterLimit ? t('最多32个字符，符号仅限_ - @ . ( ) #') : undefined}
							rule={{
								required: {
									showIcon: false,
									msg: t('会议名称不能为空'),
								},
								regular: SWITCH.characterLimit
									? [
											{
												regex: regexEnum.nameIllegal,
												msg: t('会议名称存在非法字符，请重新输入'),
											},
											{
												regex: (v) =>
													!/^[\u4e00-\u9fa5A-Za-z0-9]/.test(v) ||
													!/[\u4e00-\u9fa5A-Za-z0-9]$/.test(v),
												msg: t('首尾字符仅允许输入：英文、数字、汉字'),
											},
											{
												regex: async () => {
													const bol = await checkMeetingName()
													return !bol
												},
												msg: t('会议名称已存在'),
											},
									  ]
									: [
											{
												regex: (v: string) => {
													let len = getUTF8ByteCount(v)
													return len > 100
												},
												msg: t('输入内容超过长度限制'),
											},
											{
												regex: async () => {
													const bol = await checkMeetingName()
													return !bol
												},
												msg: t('会议名称已存在'),
											},
									  ],
							}}
							onChange={(e, v) => {
								update({ name: v })
							}}
						/>
					</LineWrapper>
					<LineWrapper className="password">
						<span className="label">{t('会议密码')}</span>
						<InputNumber
							value={password}
							disabled={isSmartCascadeMode}
							width={200}
							height={18}
							maxLength={16}
							placeholder={t('请设定密码')}
							focusMsg={t('可输入16个字符，仅限数字')}
							rule={{
								regular: [
									{
										regex: /^[0-9\*]*$/,
										msg: t('会议密码存在非法字符，请重新输入'),
									},
								],
							}}
							onChange={(e, v) => {
								update({ password: v })
							}}
						/>
					</LineWrapper>
					<LineWrapper>
						<span className="label">{t('会议免打扰')}</span>
						<Switch
							width={40}
							height={22}
							checked={meetingClosed}
							disabled={isSmartCascadeMode}
							onChange={(e, v) => {
								update({ meetingClosed: v })
							}}
						/>
						<span className="tip">{t('开启后，所有会场不可主动加入会议，必须由会议邀请会场。')}</span>
					</LineWrapper>
					<LineWrapper className="meetingSafe">
						<span className="label">{t('会议不可见')}</span>
						<Switch
							width={40}
							height={22}
							checked={meetingSafe}
							disabled={isSmartCascadeMode}
							onChange={(e, v) => {
								update({ meetingSafe: v })
							}}
						/>
						<span className="tip">
							{t('开启后，所有会场不可主动加入会议，必须由会议邀请会场，且仅受邀列表成员可见')}。
						</span>
					</LineWrapper>
					<LineWrapper className="watermark">
						<span className="label">{t('视频会议水印')}</span>
						<Switch
							width={40}
							height={22}
							checked={watermark}
							disabled={isSmartCascadeMode}
							onChange={(e, v) => {
								update({ watermark: v })
							}}
						/>
					</LineWrapper>
					{enableRtc && (
						<LineWrapper className="loginFree">
							<span className="label">{t('匿名用户登录')}</span>
							<CheckBox
								checked={loginFree.checked}
								disabled={isSmartCascadeMode}
								onChange={(e, val) => {
									console.log(e, val)
									update({
										loginFree: { checked: val, value: 1 },
									})
								}}
							>
								{t('允许')}
							</CheckBox>
						</LineWrapper>
					)}
					<LineWrapper>
						<span className="label">{t('内容共享模式')}</span>
						<RadioGroup
							value={doubleFlowLimit}
							disabled={isSmartCascadeMode}
							options={[
								{ label: t('发言会场'), value: 0, width: 120 },
								{ label: t('任意会场'), value: 1, width: 120 },
							]}
							onChange={(e, val) => {
								update({ doubleFlowLimit: val })
							}}
						></RadioGroup>
					</LineWrapper>
					{showDCSChoosen && (
						<LineWrapper className="dcs">
							<span className="label">{t('协作权限控制')}</span>
							<RadioGroup
								value={dcsMode}
								disabled={isSmartCascadeMode}
								options={[
									{ label: t('自由协作'), value: 2, width: 120 },
									{ label: t('管理方控制'), value: 1, width: 120 },
								]}
								onChange={(e, val) => {
									update({
										dcsMode: val,
									})
								}}
							></RadioGroup>
						</LineWrapper>
					)}
				</Wrap>
			</Modal>
		</>
	)
}
export default MeetingInfoSet
